<template>
  <section>
    <h2>mapGetters</h2>
    <fieldset>
      <legend>增加学生</legend>
      <div>姓名：<input type="text" v-model="formData.name" /></div>
      <div>年龄：<input type="number" v-model.number="formData.age" /></div>
      <div>
        性别： 男<input
          type="radio"
          value="男"
          name="sex"
          v-model="formData.sex"
        />
        女<input type="radio" value="女" name="sex" v-model="formData.sex" />
      </div>
      <button @click="handleAdd">添加</button>
    </fieldset>
    <h3>学生列表</h3>
    <ol>
      <li v-for="item in $store.state.stus" :key="item.name">
        {{ item.name }} {{ item.age }}
      </li>
    </ol>
    <h3>女生列表（mapGetters）</h3>
    <ol>
      <li v-for="item in girlList" :key="item.name">
        {{ item.name }}
      </li>
    </ol>
    <p>女生数量（mapGetters）：{{ girlListSize }}</p>
    <h3>学生列表（性别切换）</h3>
    <ol>
      <li
        v-for="item in getListAsSex(
          sexIndex % 2 == 0 ? '男' : '女'
        )"
        :key="item.name"
      >
        {{ item.name }}
      </li>
    </ol>
    <button @click="sexIndex++">切换</button>
    <h3>查询学生列表</h3>
    <div>
      性别：
      <select v-model="queryForm.sex">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
      年龄：
      <input v-model="queryForm.age" />
    </div>
    <ol>
      <li
        v-for="item in getListAsSexAndAge(
          queryForm.sex,
          queryForm.age
        )"
        :key="item.name"
      >
        {{ item.name }}
      </li>
    </ol>
  </section>
</template>
  
  <script>
// getters辅助函数，需要在computed里面解构
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      formData: {
        name: "",
        age: "",
        sex: "",
      },
      queryForm: {
        sex: "男",
        age: 24,
      },
      sexIndex: 0,
    };
  },
  methods: {
    handleAdd() {
      this.$store.commit("addStu", this.formData);
    },
  },
  computed: {
    ...mapGetters(["girlList","girlListSize","getListAsSex","getListAsSexAndAge"]),
  },
};
</script>
  
  <style scoped>
</style>